<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多圆环嵌套</title>
</head>

<body>
    <div class="view" style="width: 700px;height: 500px;">
        <!-- 多圆环嵌套 -->
        <div id="handlerView" style="width: 100%;height: 100%;"></div>
    </div>

    <script src="./base_js/echarts.min.js"></script>
    <script>
        const channelViewDom = document.getElementById('handlerView')
        let channelChart = echarts.init(channelViewDom)
        const CHANNEL_DATA = [{
            name: '王者荣耀',
            value: 8300
        }, {
            name: '源梦之星',
            value: 3000
        }]
        const channel_first_name = CHANNEL_DATA[0].name
        let channel_total = 0
        CHANNEL_DATA.forEach((item, index) => {
            channel_total += Number(item.value)
        })
        const channel_first_percent = Number((Number(CHANNEL_DATA[0].value) / channel_total).toFixed(2)) * 100 + '%'
        let CHANNEL_COLOR_LIST1 = ['#FAAF45', '#5A93FC']
        let channelColorEle = ''
        CHANNEL_COLOR_LIST1 = dealData(CHANNEL_COLOR_LIST1, channelColorEle)
        let CHANNEL_COLOR_LIST2 = ['#F3ECE3', '#DBE8FF']
        CHANNEL_COLOR_LIST2 = dealData(CHANNEL_COLOR_LIST2, channelColorEle)
        let channelOption = {
            backgroundColor: '#F2F7FF',
            legend: {
                left: '50%',
                top: 'center',
                selectedMode: false,
                formatter: function (name) {
                    let total = 0
                    let target
                    for (let i = 0; i < CHANNEL_DATA.length; i++) {
                        total += CHANNEL_DATA[i].value
                        if (CHANNEL_DATA[i].name === name) {
                            target = CHANNEL_DATA[i].value
                        }
                    }
                    let arr = [name, target]
                    return `{a|${name}}{b| ${target} }{c| ${'个'}}`
                },
                textStyle: {
                    rich: {
                        a: {
                            color: '#666666',
                            fontSize: 14
                        },
                        b: {
                            color: '#666666',
                            fontSize: 16,
                            fontWeight: 'bold'
                        },
                        c: {
                            color: '#999999',
                            fontSize: 12
                        }
                    }
                }
            },
            series: [
                {
                    name: '外圆',
                    type: 'pie',
                    radius: ['50%', '60%'],
                    center: ['27%', '50%'],
                    data: CHANNEL_DATA,
                    position: 'outside',
                    minAngle: 5,
                    color: [
                        '#5A93FC',
                        '#4FD1FF'
                    ],
                    labelLine: {
                        show: false
                    },
                    label: { // 饼图图形上的文本标签，可用于说明图形的一些数据信息
                        show: true,
                        position: 'center',
                        formatter: (params) => {
                            return `
        {rate|${channel_first_percent}}

        {name|${channel_first_name}}
                `
                        },
                        rich: {
                            rate: {
                                fontWeight: 'bold',
                                fontSize: '20',
                                color: '#5A93FC'
                            },
                            name: {
                                fontWeight: '500',
                                fontSize: '14',
                                color: '#666666'
                            }
                        }
                    },
                    itemStyle: {
                        color: function (params) {
                            return CHANNEL_COLOR_LIST1[params.dataIndex]
                        },
                    },
                    z: 666
                },
                {
                    name: '内圆',
                    type: 'pie',
                    silent: true,
                    radius: ['40%', '55%'],
                    center: ['27%', '50%'],
                    data: CHANNEL_DATA,
                    minAngle: 5,
                    hoverAnimation: false,
                    labelLine: {
                        show: false
                    },
                    label: {
                        show: false
                    },
                    emphasis: {
                        scale: false,
                    },
                    itemStyle: {
                        color: function (params) {
                            return CHANNEL_COLOR_LIST2[params.dataIndex]
                        }
                    },
                    z: 1
                },
            ]
        }
        // 重新对option赋值解决圆环间隔问题
        // 数据总数
        const channelSum = channelOption.series[0].data.reduce((pre, cur) => {
            return pre + cur.value
        }, 0)
        const channelVal = channelSum / 100
        for (let s of channelOption.series) {
            let channelEle = {
                name: '', value: channelVal, itemStyle: { color: 'transparent' }
            }
            s.data = dealData(s.data, channelEle)
        }
        channelOption && channelChart.setOption(channelOption)
        let currentIndex = 0
        channelChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex
        })
        let value = 0
        let name = ''
        channelChart.on('mouseover', (params) => {
            if (params.data.name !== '') {
                name = params.data.name
                value = Math.round((Number(params.data.value) / channelSum) * 100)
            }
            channelChart.setOption({
                series: [
                    {
                        name: '外圆',
                        label: {
                            show: false,
                            formatter: (params) => {
                                return `
        {rate|${value}%}

        {name|${name}}
                `
                            },
                            rich: {
                                rate: {
                                    fontWeight: 'bold',
                                    fontSize: '20',
                                    color: '#5A93FC'
                                },
                                name: {
                                    fontWeight: '500',
                                    fontSize: '14',
                                    color: '#666666'
                                }
                            }
                        },
                    },
                ]
            })
            //取消默认高亮
            channelChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: currentIndex,
            })
            channelChart.dispatchAction({
                type: 'highlight',
                seriesIndex: params.seriesIndex,
                dataIndex: params.dataIndex
            })
            currentIndex = params.dataIndex//将当前高亮的序号记录下来//鼠标县停位置高亮
        })
        // 处理圆环数据每个数组添加空格
        function dealData(data, ele) {
            return data.map((item, index) => {
                return [item, ele]
            }).flat()
        }
    </script>
</body>

</html>